.box {
    width: 100px;
}

.box1 {
    margin: 100px;
}

.box2 {
    margin: 100px;
}

.box3 {
    margin: 80px;
}

ul {
    left: 10px;
}

ul li a {
    margin: 100px;
    border: 10px;
}

ul:hover {
    background-color: rebeccapurple;
}

.box4 {
    display: inline;
    color: red;
}

.father,
.son {
    color: red;
}

.son {
    transform: matrix(100px) scale(10px);
}

.box5 {
    width: 100px;
}

@media all and (min-width: 760px) {
    .box5 {
        width: 500px;
    }
}

@media all and (min-width: 1440px) {
    .box5 {
        width: 1000px;
    }
}

.box11 {
    width: 100px;
}

.box-1 {
    bottom: 1;
}

.box-2 {
    bottom: 2;
}

.box-3 {
    bottom: 3;
}

.box-4 {
    bottom: 4;
}

.box-5 {
    bottom: 5;
}

* {
    padding: 0;
    margin: 0;
}

img {
    background-color: rebeccapurple;
}